<template>
  <div>
    <div class="home">
      <div class="div">
        <div class="swiper1">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in banner"
              :key="index"
            >
              <img :src="item.imgUrl" alt="" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination"></div> -->

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- 如果需要滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      banner: [],
    };
  },
  mounted() {
    axios
      .get("http://pcapi-xiaotuxian-front-devtest.itheima.net/home/banner")
      .then((res) => {
        // console.log(res);
        this.banner = res.data.result;
        // console.log(this.banner);

        this.$nextTick(() => {
          //更新异步 在这里获取dom更新后的值
          this.swipweli();
        });
      });
  },
  methods: {
    swipweli() {
      var mySwiper = new Swiper(".swiper1", {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        autoplay: true, //等同于以下设置
        // autoplay: {
        //   delay: 1500,
        // stopOnLastSlide: false,

        // disableOnInteraction: true,
        //   },
      });
    },
  },
};
</script>
<style scoped>
.home {
  height: 500px;
  background: #f5f5f5;
}
.home .swiper1 {
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.swiper-pagination-bullet {
  margin-top: 450px !important;
  background: #fff;
  width: 12px;
  height: 12px;
}
.swiper-button-next {
  margin-top: -10;

  color: #fff;
  font-size: 12px !important;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.swiper-button-prev {
  display: none;
}
</style>